<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>点餐系统</title>
</head>

<body>
<div id="app">

    <v-navigation-drawer v-model="drawer" app>
        <v-list dense v-show="!login.isLogin">
            <v-list-item link v-on:click="register.showRegisterDialog=true">
                <v-list-item-action>
                    <v-icon>mdi-account-plus</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                    <v-list-item-title>注册</v-list-item-title>
                </v-list-item-content>
            </v-list-item>
            <v-list-item link v-on:click="login.showLoginDialog=true">
                <v-list-item-action>
                    <v-icon>mdi-login</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                    <v-list-item-title>登陆</v-list-item-title>
                </v-list-item-content>
            </v-list-item>
        </v-list>

        <v-list dense v-show="login.isLogin">
            <v-list-item link>
                <v-list-item-action>
                    <v-icon>mdi-account</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                    <v-list-item-title>{{user.name}} 您好!</v-list-item-title>
                </v-list-item-content>
            </v-list-item>
            <v-list-item link v-on:click="getDishes()">
                <v-list-item-action>
                    <v-icon>mdi-cart-outline</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                    <v-list-item-title>我要点菜</v-list-item-title>
                </v-list-item-content>
            </v-list-item>
            <v-list-item link v-on:click="showMyOrders()">
                <v-list-item-action>
                    <v-icon>mdi-cart-outline</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                    <v-list-item-title>我的订单</v-list-item-title>
                </v-list-item-content>
            </v-list-item>
            <v-list-item link v-on:click="logout()">
                <v-list-item-action>
                    <v-icon>mdi-logout</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                    <v-list-item-title>退出登陆</v-list-item-title>
                </v-list-item-content>
            </v-list-item>
        </v-list>
    </v-navigation-drawer>

    <v-app>
        <v-app-bar app color="indigo" dark>
            <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
            <v-toolbar-title>点餐系统</v-toolbar-title>
        </v-app-bar>
        <v-content>
            <v-simple-table v-show="status == 'dishesPage' && login.isLogin">
                <template v-slot:default>
                    <thead>
                    <tr>
                        <th class="text-left">菜名</th>
                        <th class="text-left">价格/元</th>
                        <th class="text-left">选择</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="dish in dishes">
                        <td>
                            <v-icon>mdi-food</v-icon> {{ dish.dishName }}
                        </td>
                        <td>
                            <v-icon>mdi-cash</v-icon> {{ dish.price / 100 }}
                        </td>
                        <td>
                            <v-switch v-model="dish.isSelected"></v-switch>
                        </td>
                    </tr>
                    </tbody>
                </template>
            </v-simple-table>
            <v-row v-show="status == 'dishesPage' && login.isLogin">
                <v-col :col="11">
                    <div class="pa-2">已点 {{selectedDishCount}} 道菜, 总计 {{selectedDishPrice / 100}} 元</div>
                </v-col>
                <v-col :cols="2">
                    <v-btn color="primary" block v-on:click="postOrder()">下单</v-btn>
                </v-col>
            </v-row>

            <!-- TODO 需要新增区域显示订单列表 -->
            <v-simple-table v-show="status == 'ordersPage' && login.isLogin">
                <template v-slot:default>
                    <thead>
                    <tr>
                        <th class="text-left">序号</th>
                        <th class="text-left">用户</th>
                        <th class="text-left">状态</th>
                        <th class="text-left">时间</th>
                        <th class="text-left">详情</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="order in orders">
                        <td>{{order.orderId}}</td>
                        <td>{{order.userId}}</td>
                        <td>{{order.isDone}}</td>
                        <td>{{order.time}}</td>
                        <td>
                            <v-btn color='primary' v-on:click='getOrderDetail(order.orderId)'>查看详情</v-btn>
                        </td>
                    </tr>
                    </tbody>
                </template>
            </v-simple-table>

            <v-row v-show="!login.isLogin">
                <v-col>
                    <v-card class="pa-2 text-center">欢迎来到疯味网点餐系统，请先登陆!</v-card>
                </v-col>
            </v-row>
            <v-row justify="center">
                <v-dialog v-model="login.showLoginDialog" persistent max-width="400px">
                    <v-card>
                        <v-card-title>
                            <span class="headline">登陆</span>
                        </v-card-title>
                        <v-card-text>
                            <v-container>
                                <v-row>
                                    <v-col cols="12" sm="12">
                                        <v-text-field label="用户名" v-model="login.inputUsername" required></v-text-field>
                                    </v-col>
                                </v-row>
                                <v-row>
                                    <v-col cols="12" sm="12">
                                        <v-text-field label="密码" v-model="login.inputPassword" required></v-text-field>
                                    </v-col>
                                </v-row>
                                <v-row>
                                    <v-col cols="12" sm="6">
                                        <v-btn color="primary" block v-on:click="loginAccount()">登陆</v-btn>
                                    </v-col>
                                    <v-col cols="12" sm="6">
                                        <v-btn color="primary" block v-on:click="login.showLoginDialog = false">取消</v-btn>
                                    </v-col>
                                </v-row>
                            </v-container>
                        </v-card-text>
                    </v-card>
                </v-dialog>
            </v-row>
            <v-row justify="center">
              <v-dialog v-model="register.showRegisterDialog" persistent max-width="400px">
                <v-card>
                  <v-card-title>
                    <span class="headline">注册</span>
                  </v-card-title>
                  <v-card-text>
                    <v-container>
                      <v-row>
                        <v-col cols="12" sm="12">
                          <v-text-field label="用户名" v-model="register.inputUsername" required></v-text-field>
                        </v-col>
                      </v-row>
                      <v-row>
                        <v-col cols="12" sm="12">
                          <v-text-field label="密码" v-model="register.inputPassword1" required></v-text-field>
                        </v-col>
                      </v-row>
                      <v-row>
                        <v-col cols="12" sm="12">
                          <v-text-field label="确认密码" v-model="register.inputPassword2" required></v-text-field>
                        </v-col>
                      </v-row>
                      <v-row>
                        <v-col cols="12" sm="6">
                          <v-btn color="primary" block v-on:click="registerAccount()">注册</v-btn>
                        </v-col>
                        <v-col cols="12" sm="6">
                          <v-btn color="primary" block v-on:click="register.showRegisterDialog = false">取消</v-btn>
                        </v-col>
                      </v-row>
                    </v-container>
                  </v-card-text>
                </v-card>
              </v-dialog>
            </v-row>
            <v-row justify="center">
                <v-dialog v-model="showCurOrder" persistent max-width="600px">
                    <v-simple-table>
                        <template v-slot:default>
                            <thead>
                            <tr>
                                <th class="text-left">菜品</th>
                                <th class="text-left">价格/元</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="dish in curOrder.dishes">
                                <td>{{dish.dishName}}</td>
                                <td>{{dish.price / 100}}</td>
                            </tr>
                            <tr>
                                <td>总金额: {{curOrderPrice() / 100}} 元</td>
                                <td>
                                    <v-btn color="primary" v-on:click="showCurOrder = false">关闭</v-btn>
                                </td>
                            </tr>
                            </tbody>
                        </template>
                    </v-simple-table>
                </v-dialog>
            </v-row>
        </v-content>
    </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<!--script src="https://unpkg.com/axios/dist/axios.min.js"></script-->
<script src="https://dlweb.sogoucdn.com/common/lib/jquery/jquery-1.11.0.min.js"></script>

<script>
    let app = new Vue({
      el: '#app',
      data: {
        drawer: null,
        status: 'dishesPage', // 取值为: ordersPage, dishesPage
        // 用于辅助实现登陆注册
        register: {
          showRegisterDialog: false,
          inputUsername: "",
          inputPassword1: "",
          inputPassword2: "",
        },
        login: {
          isLogin: false,
          showLoginDialog: false,
          inputUsername: "",
          inputPassword: "",
        },
        user: {
          name: 'test',
          isAdmin: 0,
        },
        dishes: [
          {
            dishId: 1,
            dishName: '京酱肉丝',
            price: 2050,
            isSelected: null,
          },
          {
            dishId: 2,
            dishName: '宫保鸡丁',
            price: 1889,
            isSelected: null,
          },
          {
            dishId: 3,
            dishName: '红烧肉',
            price: 2550,
            isSelected: null,
          },
        ],
        orders: [],
        // 辅助实现订单显示详情
        showCurOrder: false,
        curOrder: {},
      },
      methods: {
        registerAccount() {
            console.log("register");
            if(app.register.inputPassword1!=app.register.inputPassword2){
                alert('注册失败! 两次输入密码不一致');
                app.register.inputUsername = "";
                app.register.inputPassword1 = "";
                app.register.inputPassword2 = "";
                return;
            }
            if(app.register.inputPassword1==""||app.register.inputUsername==""){
                alert('注册失败! 用户名或密码为空');
                app.register.inputUsername = "";
                app.register.inputPassword1 = "";
                app.register.inputPassword2 = "";
                return;
            }
            $.ajax({
                url: 'register',
                type: 'post',
                data: JSON.stringify({
                    name: app.register.inputUsername,
                    password: app.register.inputPassword1,
                }),
                success: function (data, status) {
                    if (data.ok != 1) {
                        alert('注册失败! ' + data.reason);
                        app.register.inputUsername = "";
                        app.register.inputPassword1 = "";
                        app.register.inputPassword2 = "";
                        return;
                    }
                    alert("注册成功! 请在登陆页面登陆");
                    app.register.showRegisterDialog = false;
                }
            })
        },
        loginAccount() {
          console.log("login");
          $.ajax({
            url: 'login',
            type: 'post',
            data: JSON.stringify({
              name: app.login.inputUsername,
              password: app.login.inputPassword,
            }),
            success: function (data, status) {
              if (data.ok != 1) {
                alert('登陆失败! ' + data.reason);
                app.login.inputUsername="";
                app.login.inputPassword="";
                app.login.isLogin = false;
                return;
              }
              app.user.name = data.name;
              app.user.isAdmin = data.isAdmin;
              app.login.isLogin = true;
              app.login.showLoginDialog = false;
              app.getDishes();
            }
          })
        },
        logout() {
          console.log("logout");
          app.login.isLogin = false;
          app.user.name = null;
          app.user.isAdmin = null;
          $.ajax({
            url: 'logout',
            type: 'get',
            success: function (data, status) {
            }
          });
        },
        checkLogin() {
          // 页面最初加载时先访问服务器判定自身的登陆状态
          console.log("checkLogin");
          $.ajax({
            url: 'login',
            type: 'get',
            success: function (data, status) {
              if (data.ok != 1) {
                // 未登录
                app.login.isLogin = false;
                app.user.name = null;
                app.user.isAdmin = null;
                return;
              }
              // 已经登陆
              app.login.isLogin = true;
              app.user.name = data.name;
              app.user.isAdmin = data.isAdmin;
            }
          });
        },
        getDishes() {
          // 获取菜品信息
          console.log("getDishes");
          $.ajax({
            url: 'dish',
            type: 'get',
            success: function (data, status) {
              app.dishes = data;
              app.status = 'dishesPage'
            }
          })
        },
        showMyOrders() {
          console.log("showMyOrders");
          $.ajax({
            url: 'order',
            type: 'get',
            success: function (data, status) {
              app.orders = data;
              app.status = 'ordersPage';
            }
          });
        },
        postOrder() {
          console.log("postOrder");
          dishIds = [];
          app.dishes.forEach(dish => {
            if (dish.isSelected) {
              dishIds.push(dish.dishId);
            }
          });
          $.ajax({
            url: 'order',
            type: 'post',
            data: JSON.stringify(dishIds),
            success: function (data, status) {
              alert("下单成功!");
            },
            error: function (req, str) {
              alert("下单失败!");
            }
          });
        },
        getOrderDetail(orderId) {
          console.log("getOrderDetail");
          $.ajax({
            url: 'order?orderId=' + orderId,
            type: 'get',
            success: function (data, status) {
              app.curOrder = data;
              app.showCurOrder = true;
            }
          });
        },
        curOrderPrice() {
          let total = 0;
          this.curOrder.dishes.forEach((dish) => {
            total += dish.price;
          });
          return total;
        }
      },
      computed: {
        selectedDishCount() {
          let count = 0;
          this.dishes.forEach(dish => {
            if (dish.isSelected) {
              count++;
            }
          });
          return count;
        },
        selectedDishPrice() {
          let price = 0;
          this.dishes.forEach(dish => {
            if (dish.isSelected) {
              price += dish.price;
            }
          })
          return price;
        }
      },
      vuetify: new Vuetify(),
    });
    app.checkLogin();
  </script>
</body>

</html>